<template>
  <!-- 学生上传作业和修改作业页面 -->
  <div class="father">
    <div class="titles">
      <el-icon @click="goBack" class="m-2"><ArrowLeft /></el-icon>
      <div>
        <span>{{ section.sectionName }}</span><span style="margin-left: 20px">日期:</span><span>{{ task.task_item }}</span>
      </div>
      <div></div>
    </div>
    
    <div class="container">
      <div v-if="isShow" class="results-container">
        <div  class="results">
          <div style="margin-left: 10px">评价状态：{{ taskManger.approvalStatus }}</div>
          <div>评价人：{{ task.teacherName }}</div>
          <div style="margin-right:10px">评分：{{ taskManger.score }}</div>
        </div>
        <div class="remarks" style="margin-left: 10px">评语：{{ taskManger.comment }}</div>
      </div>
      <div class="section-title">作业内容</div>
      <div class="message">
        <div class="content" v-html="task.task_name" @click="handleImageClick"></div>
      </div>

      <div>
        <div class="answer">
          <!-- 富文本编辑器 -->
          <wangEditor :content="task.taskTxt" @update="update" class="wangEditor"/>
        </div>
      </div>

      <!-- 图片放大模态框 -->
      <el-dialog
        v-model="dialogVisible"
        width="90%"
        center
      >
        <img :src="enlargedImageSrc" alt="Enlarged Image" style="width: 100%; height: auto;">
      </el-dialog>

      <div class="btn">
        <el-button type="success" round @click="tabled" v-if="isShow == false" class="btn01">提交</el-button>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import wangEditor from '@/components/wangEditor.vue'
import { ElMessage } from "element-plus"

// 引入后端接口
import {
  select,
  submit
} from "@/api/common/work/SelectWork.js"

// 返回上一页的参数
const router = useRouter()
// 接收上一个页面传过来的id
const route = useRoute()

// 定义存放富文本内容
const answer = ref('')

// 监听富文本内容
const update = (content) => {
  answer.value = content
}

// 添加返回上一页的方法
const goBack = () => {
  router.back()
}
//测试一下

// 提取出来富文本的内容并转成文本形式来判断是否为空
const plainTextAnswer = computed(() => {
  const tempDiv = document.createElement('div')
  tempDiv.innerHTML = answer.value
  return tempDiv.textContent || tempDiv.innerText || ''
})

// 提交作业 commit为0是数据库定义的(0是提交1是未提交）
const tabled = async () => {
  // 使用计算属性 plainTextAnswer 判断内容是否为空
  if (!plainTextAnswer.value.trim()) {
    ElMessage.error("请输入作业内容")
    return
  }
  let data = {
    taskId: task.value.task_id,
    answer: answer.value,
    studentId: null,
    commit: 0
  }
  let res = await submit(data)
  if (res.code == 200) {
    ElMessage.success("提交成功")
    router.back()
  } else {
    ElMessage.error("网络异常，请刷新重试")
  }
}

// 修改作业
const revise = async () => {
  let data = {
    taskId: task.value.task_id,
    answer: answer.value,
    studentId: taskManger.value.studentId
  }
  let res = await submit(data)
  if (res.code == 200) {
    ElMessage.success("修改成功")
    router.back()
  } else {
    ElMessage.error("网络异常，请刷新重试")
  }
}

// 存放章节的数据
const task = ref({})
// 存放小结信息
const section = ref({})
// 定义一个存放学生作业内容的
const taskManger = ref({})
// 定义一个判断
const isShow = ref(false)

// 判断修改数据
const decide = () => {
  // 这里因为富文本的内容不能直接赋值，需要做一下处理
  if (task.value.taskManger == null) {
    // 如果学生作业没有内容就让富文本绑定answer
    task.value.taskTxt = answer.value
  } else {
    // 如果学生作业有内容就直接把内容赋值给富文本
    task.value.taskTxt = task.value.taskManger.taskTxt
  }
  // 判断是否已经提交
  if (taskManger.value != null && taskManger.value.commit == 0) {
    isShow.value = true
  }
  // 评价状态根据后端传过来的数字转换为文字
  if (taskManger.value != null) {
    if (taskManger.value.approvalStatus == 0) {
      taskManger.value.approvalStatus = "已评"
    } else if (taskManger.value.approvalStatus == 1) {
      taskManger.value.approvalStatus = "未评"
    }
    // 确保 comment 字段有默认值
    if (taskManger.value.comment == null) {
      taskManger.value.comment = "暂无"
    }
  }
  // 判断评分人
  if (task.value.teacherName == null) {
    task.value.teacherName = "暂无"
  }
}

// 根据id查询作业
const cha = async (id) => {
  let shuju = await select(id)
  if (shuju.code == 200) {
    task.value = shuju.data
    // console.log(task.value)
    section.value = shuju.data.section
    taskManger.value = shuju.data.taskManger
    decide()
  } else {
    ElMessage.error("网络异常，请刷新重试")
  }
}

// 模态框可见性控制
const dialogVisible = ref(false)

// 当前放大的图片源
const enlargedImageSrc = ref('')

// 处理图片点击事件
const handleImageClick = (event) => {
  const target = event.target
  if (target.tagName.toLowerCase() === 'img') {
    enlargedImageSrc.value = target.src
    dialogVisible.value = true
  }
}

onMounted(() => {
  let id = route.query.taskId
  cha(id)
})
</script>


<style lang='scss' scoped>
.father{
    width: 100%;
    background-color: #ffffff;
    padding: 0;
    .m-2{
    width: 30px; 
    height: 20px;
    font-size: 20px;
    background-color: #ffffff;
  }
.section-title{
  background-color: red;
  color: #ffffff;
  width: 120px;
  height: 25px;
  text-align: center;
  border-radius:8px;
  margin-top: 10px;

  }
.titles{
    width: 100%;
    height: 45px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
  }
.container{
  width: 94%;
   margin-left: 3.4%;
   display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
   background-color: #ffffff;
   .results-container{
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 5px;
   }

   .results{
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   }

  .content {
  margin-top: 30px;
  margin-left: 30px;
  width: 94%;
  min-height: 300px;
  border: 1px solid #6a6868;
  background-color: #fcfbfb;
  overflow-wrap: break-word; /* 修正拼写错误 */

  ::v-deep img {
      width: 20% !important; /* 设置宽度为原始宽度的20% */
      height: 20% !important; /* 设置高度为原始高度的20% */
      cursor: pointer; /* 改变鼠标悬停时的光标样式 */
    }
  } 
   .answer{
    width: 94%;
    height: 490px; /* 设置最小高度 */
    margin-top: 50px;
    margin-left: 25px;
    box-sizing: border-box; /* 确保边框和内边距包含在宽度和高度内 */
    // background-color: #6a6868;
   }
  }
  .remarks{
    width: 100%;
    min-height: 20px;
  }
}
.btn{
  width:100%;
  margin-top: 5px;
}
.btn01{
  position: relative;
  left: 1490px;
  width: 7%;
}
</style>